<template>
  <div v-if="permissionsLists(126)">
    <!-- 头部 -->
    <page-header :title="$t('m.settingMessagePush')">
      <el-button type="primary" @click="createMsg" v-if="permissionsLists(157)">
        {{ $t('m.branch_Create') }}
      </el-button>
    </page-header>

    <!--容器-->
    <div class="container box-index">
      <div class="box_index">
        <!-- 搜索栏 -->
        <search-bar :options="searchBarOptions" />

        <!--分割线-->
        <div class="line"></div>

        <!-- 表格栏 -->
        <div class="table-box">
          <!--tab栏-->
          <div class="el_table_div" style="padding: 0;">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane
                :label="item.label"
                :name="item.value"
                v-for="item in stateOption"
                :key="item.value"
              ></el-tab-pane>
            </el-tabs>
          </div>
          <fast-table :options="fastTableOptions" :data="page.records" />
          <!-- 分页 -->
          <pagination
            :total="page.total"
            :current="page.current"
            :size="page.size"
            @changePageSize="changePageSize"
            @changePageNum="changePageNum"
          />
        </div>
      </div>
    </div>
    <!-- 推送消息 /  删除 -->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="msgDialog"
      :title="valueType == 1 ? $t('m.Push') : $t('m.delete')"
      width="520px"
      top="200px"
      append-to-body
    >
      <div class="dialog_content">
        <div class="dialog_content1" style="padding:0;">
          {{ valueType == 1 ? $t('m.Push_hint') : $t('m.Push_delete_hint') }}
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="msgDialog = false" class="cancel_btn">{{
          $t('m.cancel')
        }}</el-button>
        <el-button @click="submitClick" class="cancel_btn confirm_btn">{{
          $t('m.confirm_')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SearchBar from '@/components/search-bar.vue'
import pagination from '@/components/pagination.vue'
import page from '@/mixins/page'
import FastTable from '@/components/fast-table.vue'
export default {
  components: { FastTable, SearchBar, pagination },
  mixins: [page],
  data () {
    return {
      params: {
        state: ''
      },

      stateOption: [
        {
          value: '99',
          label: this.$t('m.all')
        },

        {
          value: '0',
          label: this.$t('m.To_be_pushed')
        },
        {
          value: '1',
          label: this.$t('m.Pushed')
        }
      ],

      fastTableOptions: {},
      activeName: '99',
      msgDialog: false,
      itemData: '',
      valueType: '',
      permissionsIds: []
    }
  },
  watch: {
    'params.state' (newval, oldval) {
      // console.log(newval);
      if (newval == '') {
        this.activeName = '99'
      }
    }
  },
  created () {
    this.$store.state.permissions.forEach(item => {
      this.permissionsIds.push(Number(this.$jsencrypt.decrypt(item)))
    })
    if (!this.permissionsLists(126)) {
      return
    }
    this.fastTableOptions = {
      columns: [
        {
          label: this.$t('m.PushID'),
          prop: 'id'
        },
        {
          label: this.$t('m.Push_name'),
          prop: 'sendName',
          formatter: row => this.$format.strFormat(row.sendName)
        },
        {
          label: this.$t('m.Push_title'),
          prop: 'sendTitle',
          formatter: row => this.$format.strFormat(row.sendTitle)
        },
        {
          label: this.$t('m.Push_content'),
          prop: 'sendElement',
          formatter: row => this.$format.strFormat(row.sendElement)
        },
        {
          label: this.$t('m.Push_status'),
          prop: 'state',
          formatter: row =>
            this.$format.stateFormat(row.state, this.stateOption)
        },
        {
          label: this.$t('m.Push_time'),
          prop: 'sendTime',
          formatter: row => this.$format.dateformat(row.sendTime)
        },
        {
          operate: true,
          showcolumn: this.isArrayEqual(
            [157, 159, 221, 222],
            this.permissionsLists
          ),
          display: 'dropdown',
          actions: [
            {
              label: row =>
                row.state == 0 ? this.$t('m.Push_now') : this.$t('m.Resend'),
              permission: row => this.permissionsLists(159),
              click: row => this.pushMsg(row, 1)
            },
            {
              label: this.$t('m.Push_details'),
              permission: row => this.permissionsLists(221),
              click: row => this.toDetail(row)
            },
            {
              label: row =>
                row.state == 0 ? this.$t('m.branch_Edit') : this.$t('m.Copy'),
              permission: row => this.permissionsLists(157),
              click: row => this.editMsg(row)
            },
            {
              label: this.$t('m.delete'),
              permission: row => this.permissionsLists(159),
              click: row => this.pushMsg(row, 2)
            }
          ]
        }
      ]
    }
    this.activeName = this.params.state == '' ? '99' : this.params.state
    this.getSearchBar()
    this.getPage()
  },
  methods: {
    //权限id校验
    permissionsLists (val) {
      return this.permissionsIds.includes(val)
    },
    //切换tab
    handleClick (tab) {
      this.params.state = tab.name == '99' ? '' : tab.name
      this.page.current = 1
      this.remPageNum()
      this.getPage()
    },
    getSearchBar () {
      this.searchBarOptions = {
        search: this.search,
        bars: [
          {
            value: this.params.sendName,
            type: 'input',
            prop: 'sendName',
            label: this.$t('m.search_'),
            placeholder: this.$t('m.Push_name')
          }
        ]
      }
    },
    getPage () {
      this.$api.messagePush.getMessages(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    },

    //立即推送、重新推送 / 删除
    pushMsg (item, val) {
      this.itemData = item
      this.valueType = val
      this.msgDialog = true
    },
    //确认立即推送、重新推送 / 删除
    submitClick () {
      this.valueType == 1 ? this.pushMessage() : this.deleteMessage()
    },
    pushMessage () {
      this.$api.messagePush.pushMessage({ id: this.itemData.id }).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.getPage()
          this.msgDialog = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    deleteMessage () {
      this.$api.messagePush.deleteMessage(this.itemData.id).then(res => {
        if (this.$ok(res)) {
          this.$message.success(res.message)
          this.getPage()
          this.msgDialog = false
        } else {
          this.$message.error(res.message)
        }
      })
    },

    //消息详情
    toDetail (item) {
      this.setPageNum(this.page.current, this.page.size, this.params)
      this.$router.push({
        path: '/settings/message-push/detail',
        query: { id: item.id }
      })
    },

    //编辑、复制
    editMsg (item) {
      let params = {
        state: item.state,
        id: item.id
      }
      this.setPageNum(this.page.current, this.page.size, this.params)
      this.$router.push({
        path: '/settings/message-push/cm',
        query: { params: JSON.stringify(params) }
      })
    },

    //创建
    createMsg () {
      this.setPageNum(this.page.current, this.page.size, this.params)
      this.$router.push({
        path: '/settings/message-push/cm'
      })
    }
  }
}
</script>

<style scoped></style>
